<template>
  <div class="app-container">
    <Header />
    <FileUpload @file-uploaded="handleFileUploaded" />
    <AnalysisPanel v-if="dataLoaded" :signals="signals" />

    <!-- 时间筛选组件 -->
    <TimeFilter
        v-if="dataLoaded"
        :signals="signals"
        @filter="handleTimeFilter"
    />

    <DataTable v-if="dataLoaded" :signals="filteredSignals" />
    <SignalCharts v-if="dataLoaded" :signals="filteredSignals" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElNotification } from 'element-plus'
import Header from './Header.vue'
import FileUpload from './FileUpload.vue'
import AnalysisPanel from './AnalysisPanel.vue'
import DataTable from './DataTable.vue'
import SignalCharts from './SignalCharts.vue'
import TimeFilter from './TimeFilter.vue'

const signals = ref([])
const filteredSignals = ref([])
const dataLoaded = ref(false)

const handleFileUploaded = (data) => {
  // 保存完整数据集
  signals.value = data

  // 默认显示前10000条数据
  filteredSignals.value = data.slice(0, 10000)
  dataLoaded.value = true

  ElNotification({
    title: '数据导入成功',
    message: `已加载 ${data.length} 条信号数据`,
    type: 'success',
    duration: 3000
  })
}

// 处理时间筛选事件
const handleTimeFilter = (filter) => {
  let filtered = []

  if (filter.startTime > filter.endTime) {
    // 当最小值大于最大值时，取最小值开始的10000条数据
    filtered = signals.value.filter(s => s.time >= filter.startTime)
    filtered = filtered.slice(0, 10000)

    ElNotification({
      title: '特殊筛选模式',
      message: `最小值大于最大值，显示从 ${filter.startTime.toFixed(4)}s 开始的10000条数据`,
      type: 'warning',
      duration: 5000
    })
  } else {
    // 正常时间范围筛选
    filtered = signals.value.filter(s =>
        s.time >= filter.startTime && s.time <= filter.endTime
    )

    // 确保不超过10000条
    filtered = filtered.slice(0, 10000)

    ElNotification({
      title: '时间筛选应用',
      message: `显示 ${filtered.length} 条信号数据 (${filter.startTime.toFixed(4)}s - ${filter.endTime.toFixed(4)}s)`,
      type: 'info',
      duration: 3000
    })
  }

  filteredSignals.value = filtered
}
</script>

<style scoped>
.app-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
}
</style>